<template>
  <div class="bg-white dark:bg-zinc-900 xl:dark:bg-zinc-800 rounded pb-1 relative waterfall-item">
    <div
      class="relative w-full rounded cursor-zoom-in group"
      :style="{
        backgroundColor: randomRGB()
      }"
    >
      <img
        class="w-full rounded bg-transparent"
        ref="photoRef"
        v-lazy
        :src="data.photo"
        @click="onExitFullScreen"
      />

      <!-- 遮罩层 -->
      <div
        class="opacity-0 w-full h-full bg-zinc-900/50 absolute top-0 left-0 rounded duration-300 group-hover:opacity-100"
      >
        <m-button class="absolute top-1.5 left-1.5">分享</m-button>
        <m-button
          class="absolute top-1.5 right-1.5"
          type="info"
          icon="heart"
          iconClass="fill-zinc-900 dark:fill-zinc-200"
        />
        <m-button
          class="absolute bottom-1.5 left-1.5 bg-zinc-100/70"
          type="info"
          size="small"
          icon="download"
          iconClass="fill-zinc-900 dark:fill-zinc-200"
          @click="onDownload"
        />
        <m-button
          class="absolute bottom-1.5 right-1.5 bg-zinc-100/70"
          type="info"
          size="small"
          icon="full"
          iconClass="fill-zinc-900 dark:fill-zinc-200"
          @click="onImgFullScreen"
        />
      </div>
    </div>
    <!-- 标题 -->
    <p class="text-sm mt-1 font-bold text-zinc-900 dark:text-zinc-300 line-clamp-2 px-1" alt>
      {{ data.title }}
    </p>
    <!-- 作者 -->
    <div class="flex items-center mt-1 px-1">
      <img class="h-2 w-2 rounded-full" v-lazy :src="data.avatar" alt="" />
      <span class="text-sm text-zinc-500 ml-1">{{ data.author }}</span>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { saveAs } from 'file-saver'
import { useFullscreen } from '@vueuse/core'
import { randomRGB } from '@/utils/color.js'
const props = defineProps({
  data: {
    type: Object,
    required: true
  }
})
const onDownload = () => {
  saveAs(props.data.photoDownLink)
}
const photoRef = ref()
const { enter: onImgFullScreen, exit: onExitFullScreen } = useFullscreen(photoRef)
</script>
<style lang="scss" scoped>
/* 需要指定容器高度，才能使v-lazy生效。页面初渲染时。没有高度，则所有元素都是可见的，会导致所有图片立即加载,图片高度接口已返回，则可以直接计算获取 */
.waterfall-item {
  page-break-inside: avoid;
  min-height: 5rem;
}
</style>
